<template>
  <view class="hotCity">
    <view>
      <text class="iconfont icon-douyin"></text>
      <text>抖音热门城市</text>
      <view class="hotCities">
        <view v-for="item in hotCities" :key="item" class="city" @click="cityClick(item)">
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HotCity',
  data() {
    return {
      hotCities: [
        '深圳',
        '北京',
        '上海',
        '城都',
        '广州',
        '重庆',
        '西安',
        '苏州',
        '武汉',
        '杭州',
        '郑州',
        '南京',
        '合肥',
        '长沙',
        '福州'
      ]
    }
  },
  methods: {
    cityClick(name) {
      uni.setStorageSync('city', name)
      uni.reLaunch({ url: '/pages/City/City' })
    }
  }
}
</script>

<style lang="scss" scoped>
.hotCity {
  padding: 30rpx 20rpx;
  color: #eee;
  font-size: 28rpx;
  background: #171827;
  .icon-douyin {
    color: red;
  }
  .hotCities {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .city {
      width: 32%;
      padding: 20rpx 0;
      text-align: center;
      background: #262734;
      margin-top: 10rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
